<template>
  <div>  
  
  <van-tabs v-model:active="current">
    <van-tab title="用户名登录">
		<van-field v-model="username" name="用户名" label="用户名" placeholder="请输入用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
		<van-field v-model="password" type="password" name="密码" label="密码" placeholder="请输入密码" :rules="[{ required: true, message: '请填写密码' }]" />
		<van-row>
		  <van-col span="16">
			  <van-field v-model="code" type="number" name="图形验证码" label="图形验证码" placeholder="请填写图形验证码"
			   :rules="[{ required: true, message: '请填写图形验证码' }]" />
		  </van-col> 
		  <van-col span="8"> <CodeImg type="login"/></van-col>
		</van-row>
	</van-tab>
    <van-tab title="手机号登录">
		<van-field v-model="phone" type="tel" name="手机号" label="手机号" placeholder="请输入手机号"  maxlength="11" :rules="[{ required: true, message: '请填写手机' }]" />
		<van-field v-model="password" type="password" name="密码" label="密码" placeholder="请输入密码" :rules="[{ required: true, message: '请填写密码' }]" />
		 
		 <van-row>
		   <van-col span="16">
		 	  <van-field v-model="code" type="number" name="图形验证码" label="图形验证码" placeholder="请填写图形验证码"
		 	   :rules="[{ required: true, message: '请填写图形验证码' }]" />
		   </van-col> 
		   <van-col span="8"> <CodeImg type="login"/></van-col>
		 </van-row>
		 <van-row>
		   <van-col span="16">
		 	  <van-field v-model="smsCode" type="number" name="smsCode" label="验证码" placeholder="验证码"
		 	   :rules="[{ required: true, message: '请填写验证码' }]" />
		   </van-col> 
		   <van-col span="8">   <van-button  size="small" type="primary" @click="sendCode()">发送验证码</van-button></van-col>
		 </van-row>
	</van-tab> 
  </van-tabs>
  
  
   
  <div style="margin: 16px;">
    <van-button round block type="primary" @click="onSubmit()">登录</van-button>
  </div> 
       
  </div>
</template>
<script >      
 import CodeImg from '../../components/CodeImg.vue'
import {mapState,mapMutations} from 'vuex';  
export default {
  components:{CodeImg}, 
  data(){
    return {
      "current": 0,"nickName": "","username": "","password": "","phone": '',"code": '',"smsCode": '',
    }
  }, 
  computed:{...mapState(['hash','uuid'])},
  created(){
         this.nickName = "wzskyline"
		 this.username = "wzskyline"
		 this.phone = "13066668888"
		 this.password = "123456aa"
  },
  methods: { ...mapMutations(['SetHash']),
	 async sendCode(){
		if(this.regPhone(this.phone)) return;
		if(this.isEmpty(this.code)) return this.Toast('图形验证码不能为空') 
		 
		var data = await this.post("/message/message/sendLoginCode",{
			 "code": this.code,
			 "phone": this.encrypt(this.phone),
			 "uuid": this.uuid,
		 })  
	 }, 
	 async onSubmit(){
		var url = this.current == 0 ? "/loginByPwd":"/loginByPhone";
		var data = {
			"username": this.username,
			"password": this.encrypt( this.password ), 
			"code": this.code,
			"uuid": this.uuid,
		} 
		if(this.current == 0){
			if(this.isEmpty(this.username)) return this.Toast('用户名不能为空')   
			if(this.isEmpty(this.password)) return this.Toast('密码不能为空')    
			if(this.isEmpty(this.code)) return this.Toast('图形验证码不能为空')    
		}else{
			if(this.regPhone(this.phone)) return; 
			if(this.isEmpty(this.code)) return this.Toast('图形验证码不能为空')  
			if(this.isEmpty(this.smsCode)) return  this.Toast('手机验证码不能为空')    
			data = { 
				"phone": this.encrypt( this.phone ), 
				"smsCode": this.smsCode,
				"uuid": this.uuid,
			}
		} 
							
	   var data = await this.post(url,data)
	   if(data.code == 200 ){
		 // 登录成功 
		 this.Toast(data.msg)   
		 this.$store.state.token =  data.token;
		 uni.setStorageSync('token',data.token)
		 
	   }else{
		 this.Toast(data.msg)   
	   }
		  
	  }
  },
  mounted(){  
    this.SetHash(location.hash)
  }

}
</script>
<style scoped>
   
</style>